<!DOCTYPE html>
<!-- 
(c) Copyright 2011 Aditya Ravi Shankar (www.adityaravishankar.com). All Rights Reserved. 
NowJS and Node.js Tutorial – Creating a multi room chat client
http://www.adityaravishankar.com/2011/10/nowjs-node-js-tutorial-creating-multi-room-chat-server/

-->
<html lang="en">
<head>
<title>nowjs Multi Room Chat Server</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>

<script>
$(document).ready(function(){
	now.receiveMessage = function(name, message){
		$("#messages").append("<br>" + name + ": " + message);
	}

	// Send message to people in the same group
	$("#send-button").click(function(){
		now.distributeMessage($("#text-input").val());
		$("#text-input").val("");
	});

	now.name = prompt("What's your name?", "");

	// on establishing 'now' connection, set server room and allow message sending
	now.ready(function(){
		// Pick up list of available chatrooms from server and populate dropdown 
		setServerRoomFromList(now.serverRoomsList);
		
		// By default pick the first chatroom 
		now.changeRoom($('#server-room').val());
		// Connection established and room set; allow user to start sending messages
		$("#send-button").removeAttr('disabled');
	});
	
	// On change of drop down, clear text and change server room
	$('#server-room').change(function(){
		$("#messages").html('');
		now.changeRoom($('#server-room').val());
	});

});

// populate the #server-room dropdown 
function setServerRoomFromList(roomList){
	$('#server-room').empty();
	$.each(roomList, function(key, value)
	{   
	     $('#server-room').
	          append($("<option></option>").
	          attr("value",key).
	          text(value)); 
	});
}
	
</script>

</head>

<body>
  
  <div id="messages"></div>
  <input type="text" id="text-input">
  <input type="submit" value="Send" disabled id="send-button">
  <select id="server-room">
  	<option value="connecting" selected>Connecting...</option>	
  </select>
</body>
</html>